<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Combined Colspan and Rowspan Test</title>
        <style>
        table {
            border-collapse: collapse;
            width: 100%;
            margin: 20px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        .success {
            color: green;
        }
        .error {
            color: red;
        }
        .test-section {
            margin: 20px 0;
            padding: 10px;
            border: 1px solid #ccc;
        }
        </style>
    </head>
    <body>
        <h1>Combined Colspan and Rowspan Test</h1>

        <div class="test-section">
            <h2>Test Table with Both Colspan and Rowspan</h2>
            <table id="test-table">
                <thead>
                    <tr>
                        <th>Week</th>
                        <th>Project</th>
                        <th>Task</th>
                        <th>Status</th>
                        <th>Hours</th>
                        <th>Notes</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td rowspan="2">Week 1</td>
                        <td rowspan="2">Project Alpha</td>
                        <td>Planning</td>
                        <td>Complete</td>
                        <td>8</td>
                        <td>Initial planning phase</td>
                    </tr>
                    <tr>
                        <td>Design</td>
                        <td>In Progress</td>
                        <td>12</td>
                        <td>UI/UX design</td>
                    </tr>
                    <tr>
                        <td>Week 2</td>
                        <td colspan="2">Project Beta - Full Development</td>
                        <td>Active</td>
                        <td>40</td>
                        <td>Main development sprint</td>
                    </tr>
                    <tr>
                        <td rowspan="3">Week 3</td>
                        <td>Project Gamma</td>
                        <td>Testing</td>
                        <td colspan="2">QA Testing - 16 hours</td>
                        <td>Bug fixes</td>
                    </tr>
                    <tr>
                        <td>Project Delta</td>
                        <td>Review</td>
                        <td>Complete</td>
                        <td>4</td>
                        <td>Code review</td>
                    </tr>
                    <tr>
                        <td colspan="3">Multiple Projects - Documentation</td>
                        <td>8</td>
                        <td>Technical docs</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="test-section">
            <h2>Test Results</h2>
            <div id="results"></div>
        </div>

        <script type="module">
        import {DataTable} from "../../dist/module.js"

        document.addEventListener("DOMContentLoaded", () => {
            const results = document.getElementById("results")

            try {
                const dt = new DataTable("#test-table", {
                    searchable: true,
                    sortable: true,
                    perPage: 10
                })

                // Test 1: Verify data structure integrity
                const headingsCount = dt.data.headings.length
                const expectedHeadings = 6 // Week + Project + Task + Status + Hours + Notes

                const test1Passed = headingsCount === expectedHeadings
                results.innerHTML += `<p class="${test1Passed ? "success" : "error"}">
                    Test 1: Headings count - Expected: ${expectedHeadings}, Actual: ${headingsCount}
                    ${test1Passed ? "✓ PASS" : "✗ FAIL"}
                </p>`

                // Test 2: Verify all rows have correct number of cells
                let test2Passed = true
                dt.data.data.forEach((row, index) => {
                    if (row.cells.length !== headingsCount) {
                        test2Passed = false
                        results.innerHTML += `<p class="error">
                            Row ${index} has ${row.cells.length} cells but headings has ${headingsCount}
                        </p>`
                    }
                })
                results.innerHTML += `<p class="${test2Passed ? "success" : "error"}">
                    Test 2: Row cell count consistency ${test2Passed ? "✓ PASS" : "✗ FAIL"}
                </p>`

                // Test 3: Count placeholder cells
                let colspanPlaceholders = 0
                let rowspanPlaceholders = 0

                dt.data.data.forEach((row, _rowIndex) => {
                    row.cells.forEach((cell, _cellIndex) => {
                        if (cell.attributes?.["data-colspan-placeholder"] === "true") {
                            colspanPlaceholders++
                        }
                        if (cell.attributes?.["data-rowspan-placeholder"] === "true") {
                            rowspanPlaceholders++
                        }
                    })
                })

                results.innerHTML += `<p class="success">
                    Test 3: Placeholder counts - Colspan: ${colspanPlaceholders}, Rowspan: ${rowspanPlaceholders} ✓
                </p>`

                // Test 4: Verify specific cell attributes
                let test4Passed = true

                // Check row 0, cell 0 (Week 1) has rowspan="2"
                if (dt.data.data[0].cells[0].attributes?.rowspan !== "2") {
                    test4Passed = false
                    results.innerHTML += `<p class="error">
                        Row 0, Cell 0 should have rowspan="2"
                    </p>`
                }

                // Check row 0, cell 1 (Project Alpha) has rowspan="2"
                if (dt.data.data[0].cells[1].attributes?.rowspan !== "2") {
                    test4Passed = false
                    results.innerHTML += `<p class="error">
                        Row 0, Cell 1 should have rowspan="2"
                    </p>`
                }

                // Check row 2, cell 1 has colspan="2"
                if (dt.data.data[2].cells[1].attributes?.colspan !== "2") {
                    test4Passed = false
                    results.innerHTML += `<p class="error">
                        Row 2, Cell 1 should have colspan="2"
                    </p>`
                }

                // Check row 3, cell 0 (Week 3) has rowspan="3"
                if (dt.data.data[3].cells[0].attributes?.rowspan !== "3") {
                    test4Passed = false
                    results.innerHTML += `<p class="error">
                        Row 3, Cell 0 should have rowspan="3"
                    </p>`
                }

                // Check row 3, cell 3 has colspan="2"
                if (dt.data.data[3].cells[3].attributes?.colspan !== "2") {
                    test4Passed = false
                    results.innerHTML += `<p class="error">
                        Row 3, Cell 3 should have colspan="2"
                    </p>`
                }

                // Check row 5, cell 1 has colspan="3"
                if (dt.data.data[5].cells[1].attributes?.colspan !== "3") {
                    test4Passed = false
                    results.innerHTML += `<p class="error">
                        Row 5, Cell 1 should have colspan="3"
                    </p>`
                }

                results.innerHTML += `<p class="${test4Passed ? "success" : "error"}">
                    Test 4: Specific cell attributes ${test4Passed ? "✓ PASS" : "✗ FAIL"}
                </p>`

                // Test 5: Verify rowspan placeholders in correct positions
                let test5Passed = true

                // Row 1 should have placeholders at cells 0 and 1
                if (dt.data.data[1].cells[0].attributes?.["data-rowspan-placeholder"] !== "true") {
                    test5Passed = false
                    results.innerHTML += `<p class="error">Row 1, Cell 0 should be rowspan placeholder</p>`
                }
                if (dt.data.data[1].cells[1].attributes?.["data-rowspan-placeholder"] !== "true") {
                    test5Passed = false
                    results.innerHTML += `<p class="error">Row 1, Cell 1 should be rowspan placeholder</p>`
                }

                // Rows 4 and 5 should have placeholder at cell 0
                if (dt.data.data[4].cells[0].attributes?.["data-rowspan-placeholder"] !== "true") {
                    test5Passed = false
                    results.innerHTML += `<p class="error">Row 4, Cell 0 should be rowspan placeholder</p>`
                }
                if (dt.data.data[5].cells[0].attributes?.["data-rowspan-placeholder"] !== "true") {
                    test5Passed = false
                    results.innerHTML += `<p class="error">Row 5, Cell 0 should be rowspan placeholder</p>`
                }

                results.innerHTML += `<p class="${test5Passed ? "success" : "error"}">
                    Test 5: Rowspan placeholder positions ${test5Passed ? "✓ PASS" : "✗ FAIL"}
                </p>`

                // Test 6: Test sorting with combined colspan/rowspan data
                let test6Passed = true
                try {
                    dt.columns.sort(0, "asc") // Sort by Week column
                    results.innerHTML += `<p class="success">
                        Test 6: Sorting with colspan/rowspan data ✓ PASS
                    </p>`
                } catch (error) {
                    test6Passed = false
                    results.innerHTML += `<p class="error">
                        Test 6: Sorting failed - ${error.message}
                    </p>`
                }

                // Test 7: Test searching with combined data
                let test7Passed = true
                try {
                    const searchResults = dt.search("Project")
                    results.innerHTML += `<p class="success">
                        Test 7: Searching with colspan/rowspan data ✓ PASS (${searchResults} results found)
                    </p>`
                } catch (error) {
                    test7Passed = false
                    results.innerHTML += `<p class="error">
                        Test 7: Searching failed - ${error.message}
                    </p>`
                }

                // Test 8: Verify rendered table has both colspan and rowspan attributes
                let test8Passed = true
                setTimeout(() => {
                    const renderedTable = document.querySelector("#test-table")
                    const colspanCells = renderedTable.querySelectorAll("[colspan]")
                    const rowspanCells = renderedTable.querySelectorAll("[rowspan]")

                    if (colspanCells.length === 0) {
                        test8Passed = false
                        results.innerHTML += `<p class="error">
                            Test 8: No colspan attributes found in rendered table
                        </p>`
                    }
                    if (rowspanCells.length === 0) {
                        test8Passed = false
                        results.innerHTML += `<p class="error">
                            Test 8: No rowspan attributes found in rendered table
                        </p>`
                    }
                    if (test8Passed) {
                        results.innerHTML += `<p class="success">
                            Test 8: Rendered table has both colspan (${colspanCells.length}) and rowspan (${rowspanCells.length}) attributes ✓ PASS
                        </p>`
                    }

                    // Summary
                    const allTestsPassed = test1Passed && test2Passed && test4Passed && test5Passed && test6Passed && test7Passed && test8Passed
                    results.innerHTML += `<h3 class="${allTestsPassed ? "success" : "error"}">
                        ${allTestsPassed ? "All tests passed! ✓" : "Some tests failed! ✗"}
                    </h3>`

                    // Debug info
                    results.innerHTML += `<details>
                        <summary>Debug Information</summary>
                        <pre>Headings count: ${dt.data.headings.length}</pre>
                        <pre>Data rows: ${dt.data.data.length}</pre>
                        <pre>Colspan placeholders: ${colspanPlaceholders}</pre>
                        <pre>Rowspan placeholders: ${rowspanPlaceholders}</pre>
                        <pre>All row cell counts: ${JSON.stringify(dt.data.data.map(r => r.cells.length))}</pre>
                        <pre>Row 0 cells: ${JSON.stringify(dt.data.data[0].cells.map(c => ({
                            text: c.text,
                            colspan: c.attributes?.colspan,
                            rowspan: c.attributes?.rowspan,
                            colPlaceholder: c.attributes?.["data-colspan-placeholder"],
                            rowPlaceholder: c.attributes?.["data-rowspan-placeholder"]
                        })), null, 2)}</pre>
                        <pre>Row 1 cells: ${JSON.stringify(dt.data.data[1].cells.map(c => ({
                            text: c.text,
                            colspan: c.attributes?.colspan,
                            rowspan: c.attributes?.rowspan,
                            colPlaceholder: c.attributes?.["data-colspan-placeholder"],
                            rowPlaceholder: c.attributes?.["data-rowspan-placeholder"]
                        })), null, 2)}</pre>
                    </details>`
                }, 100)

            } catch (error) {
                results.innerHTML = `<p class="error">Error initializing DataTable: ${error.message}</p>`
                console.error("Test error:", error)
            }
        })
        </script>
    </body>
</html>
